<template>
  <div id="page">
    <!-- 顶部 -->
    <div id="header_top">
      <p>购物车</p>
      <p>
        <span class="iconfont">&#xf0112; </span>
        <span class="iconfont">&#xe71e;</span>
        <i></i>
      </p>
    </div>

    <!-- 导航 -->
    <nav>
      <ul>
        <li>
          <a href="#" class="cur">
            <i></i>
            全部(20)
          </a>
        </li>
        <li><a href="#">降价(4)</a></li>
        <li><a href="#">常卖(2)</a></li>
        <li><a href="#" class="iconfont">分类&#xe611;</a></li>
      </ul>
    </nav>

    <!-- 内容 -->
    <main>
      <!-- 小U自营 -->
      <div id="con">
        <input
          type="checkbox"
          name=""
          id=""
          v-model="allcheack"
          @change="all()"
        />
        <h2>小U自营</h2>
        <span
          >已免运费
          <i></i>
        </span>
        <span>领劵</span>
      </div>

      <!-- 购物车 -->
      <div id="cart">
        <ul>
          <li v-for="(item, index) in list" :key="item.id">
            <div>
              <span
                ><input
                  v-model="item.istrue"
                  type="checkbox"
                  name=""
                  id=""
                  @change="checkone()"
              /></span>
            </div>
            <div>
              <img :src="$pre + item.img" alt="" />
            </div>
            <div class="right">
              <p>{{ item.goodsname }}</p>
              <p>敏感肌可用，控油祛痘，男女可用男女可用</p>
              <p>
                <span>粉色 50ml</span>
                <span class="iconfont">&#xe601;</span>
              </p>
              <p>比加入时降￥100</p>
              <p>
                <span>￥</span>
                <i>{{ item.price }}</i>
                <del>￥{{ item.price + 100 }}</del>
                <span @click="pre(item.id, index)">-</span>
                <span>{{ item.num }}</span>
                <span @click="add(item.id, index)">+</span>
              </p>
            </div>
          </li>
        </ul>
      </div>
      <!-- 品牌精选 -->
    </main>

    <!-- 结算 -->
    <div id="settlement">
      <input
        type="checkbox"
        name=""
        id=""
        v-model="allcheack"
        @change="all()"
      />
      <p>全选</p>
      <p>
        <span>合计</span>
        <span>以免运费</span>
      </p>
      <p>
        <span>￥{{ addprice }}</span>
        <span>以优惠￥{{ youhui }}元</span>
      </p>
      <p @click="order()">结算</p>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import { cartlist, cartedit } from "../../../utils/api";
export default {
  data() {
    return {
      list: [],
      allcheack: false,
      obj: {
        cheack: false,
      },
    };
  },
  computed: {
    ...mapGetters({
      userlist: "user",
    }),
    // 计算总价
    addprice() {
      let add = 0;
      console.log(this.list);
      this.list.forEach((item) => {
        if (item.istrue) {
          add += item.price * item.num;
        }
      });
      return add;
    },
    //优惠价格
    youhui() {
      let add = 0;
      this.list.forEach((item) => {
        if (item.istrue) {
          add += item.num * 100;
        }
      });
      return add;
    },
  },
  methods: {
    ...mapActions({
      // reqchangeuser:'reqchangeuser'
    }),
    // 点击全部
    all() {
      this.list.map((item) => {
        return (item.istrue = this.allcheack);
      });
    },
    // 点击单选
    checkone() {
      // console.log(this.list);
      this.allcheack = this.list.every((item) => {
        return item.istrue;
      });
    },
    // 点击添加
    add(id, index) {
      cartedit({ id: id, type: 2, authorization: this.userlist.token }).then(
        (res) => {
          // console.log(res);
          if (res.data.code == 200) {
            this.list[index].num++;
          }
        }
      );
    },
    // 点击减少
    pre(id, index) {
      if (this.list[index].num <= 1) {
        return;
      } else {
        cartedit({ id: id, type: 1, authorization: this.userlist.token }).then(
          (res) => {
            // console.log(res);
            if (res.data.code == 200) {
              this.list[index].num--;
            }
          }
        );
      }
    },
    // 点击结算
    order() {
      let a = this.list.filter((item) => {
        return item.istrue;
      });
      if (a.length == 0) {
        alert("未选中商品");
        return;
      } else {
        // let ordernum = 0;
        // a.map((item) => {
        //   ordernum += item.num;
        // });
        // // console.log(ordernum);
        // let id = a.map((item) => {
        //     return item.goodsid;
        //   }).join();

        // let obj = {
        //   uid: this.userlist.uid,
        //   countmoney: Number(this.addprice),
        //   countnumber: ordernum,
        //   idstr: id,
        // };

        // 默认购买总数量为0
        let num = 0;
        this.list.forEach((item) => {
          if (item.istrue) {
            num++;
          }
        });
        // 购物车选中的id
        let arr1 = [];
        this.list.forEach((item) => {
          if (item.istrue) {
            arr1.push(item.id);
          }
        });
        let arr2 = arr1.join(",");
        let obj = {
          countmoney: this.addprice,
          countnumber: num,
          idstr: arr2,
        };
        sessionStorage.setItem("order", JSON.stringify(obj));
        sessionStorage.setItem("shop", JSON.stringify(a));
        this.$router.push("/order");
      }
    },
  },
  mounted() {
    // this.reqchangeuser()
    console.log(this.userlist);

    cartlist({ uid: this.userlist.uid }).then((res) => {
      let arr = res.data.list;
      if (res.data.list) {
        arr.forEach((item) => {
          item.istrue = false;
        });
        this.list = arr;
      }
    });
  },
};
</script>

<style scoped src='../../../assets/css/shopping_cart.css'>
/* @import '../../../assets/css/shopping_cart.css'; */
</style>